<template>
    <div class="autoSetting">
        <Nav></Nav>
        <div class="writing_right">
            <div class="autoSettingTitleList">
                <div class="autoSetting_content">
                    <div class="autoSetting_content_title"><img :src="siteDemo.logo_image" />您的站点是采用<b>[{{siteDemo.name}}]</b>开发的，请按以下方法安装插件</div>
                    <div class="autoSetting_content_bottom">
                        <div class="Edit_content">
                          <div class="Edit_content_list">
                              <div class="content_list_dd">
                                  站点名称
                                  <el-tooltip class="item" effect="dark" content="请输入您的网站名称" placement="top-start">
                                      <el-button><img src="@a/img/sv12.svg" /></el-button>
                                  </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                  <el-input
                                  placeholder="如AI写作官网"
                                  ref="inputRef"
                                  v-model="info.name"
                                  >
                                  </el-input>
                              </div>
                          </div>
                          <div class="Edit_content_list siteUrl">
                              <div class="content_list_dd">
                                  网站地址
                                  <el-tooltip class="item" effect="dark" content="只需要输入网站域名部分即可,如http://www.ai-dog.net 输入:www.ai-dog.net就可以了" placement="top-start">
                                      <el-button><img src="@a/img/sv12.svg" /></el-button>
                                  </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <el-input placeholder="如www.baidu.com" v-model="info.website" class="input-with-select" @input="handleInput">
                                  <el-select v-model="info.is_https" slot="prepend" disabled placeholder="请选择">
                                    <el-option label="http://" value="0"></el-option>
                                    <el-option label="https://" value="1"></el-option>
                                  </el-select>
                                </el-input>
                              </div>
                          </div>
                          <div class="Edit_content_list" v-show="info.keywords">
                              <div class="content_list_dd">
                                  关键词
                                  <el-tooltip class="item" effect="dark" content="只需要输入网站域名部分即可,如http://www.ai-dog.net 输入:www.ai-dog.net就可以了" placement="top-start">
                                      <el-button><img src="@a/img/sv12.svg" /></el-button>
                                  </el-tooltip>
                              </div>
                              <div class="content_list_dt">
                                <a :href="fullUrl" target="_blank" v-for="(keyn, index) in info.keywords" >{{keyn}}</a>
                              </div>
                          </div>
                          <div class="Edit_content_more" v-show="info.keywords">
                            文章发布会对以上关键词自动加上锚链接
                          </div>
						  
                            <div class="Edit_content_list password" style="margin-top: 20px;">
                                <div class="content_list_dd">
                                    接口密码
                                    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                                        <el-button><img src="@a/img/sv12.svg" /></el-button>
                                    </el-tooltip>
                                </div>
                                <div class="content_list_dt">
                                    <el-input
                                    placeholder="请填写配置的接口密码"
                                    ref="inputRef"
                                    v-model="password"
                                    @input="handleInput">
                                    </el-input>
                                    <div class="list_dt_btn" @click="generate()" v-if="isActive">生成</div>
                                    <div class="list_dt_btn" @click="copyInputValue" v-if="!isActive">复制</div>
                                </div>
                            </div>						  
							
                            <div class="down_site_plus" v-show="siteDemo.interface_file!=''">
                              <div class="down_site_plus_btn" @click="download_plus">
                                <div class="site_plus_dd"><i class="el-icon-paperclip"></i></div>
                                <div class="site_plus_dt"><p>下载安装包({{siteDemo.version}})</p><p style="color:blue; font-size: 12px;">🔑{{password}}</p><p>🔐以上是系统生成的48位密码，安装包里包含以上通信密码。</p></div>
                              </div>
                            </div>
							
							
                            <div class="Edit_content_title">安装说明</div>
                            <div class="Edit_content_editor">
                                <div style="text-align: center; line-height: 300px; width: 100%;" v-html="siteDemo.description_content"></div>
                            </div>
							
					
							
                            <div class="Edit_btn">
                                 <button class="saveA" @click="addSite">我已完成以上操作并下一步</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Question">
          <div class="Question_title">
            <div class="Question_title_dd">接入过程中有问题？</div>
            <div class="Question_title_dt">点击下方按钮咨询客服一对一协助你开发。</div>
          </div>
          <div class="Question_btn"><a href="https://work.weixin.qq.com/kfid/kfc93ed84ae79165746" target="_blank">咨询客服</a></div>
        </div>
    </div>
</template>

<script>
  import Nav from "@c/common/nav/nav";

  export default {
      name: "parametersettings",
      data() {
          return {
			  siteDemo:[],
			  fullUrl:"",
			  password:"",
			  isActive: true,
              info:{
				  name:'',
			  },

          };
      },
      components: {
          Nav
      },
	computed: {
	  handleInput() {
		  this.isActive = this.password.length === 0;
	  },
	  
	},	  
      methods:{
		getDemo(){
            this.axios.get('/api/site/getDemo',{
					params: {
						id: this.info.site_demo_id,
					}
				}).then(res => {
              if(res.code === 1) {
                this.siteDemo = res.result

              }
            })
		},
		addSite(){
			if(!this.siteDemo){
				this.$message.error('系统不存在！');
			}else{
				this.info.secret_key=this.password;
				this.info.column_interface = this.siteDemo.column_interface;
				this.info.headers = this.siteDemo.headers;
				this.info.cookies = this.siteDemo.cookies;
				this.info.title_field = this.siteDemo.title_field;
				this.info.column_field = this.siteDemo.column_field;
				this.info.publishing_interface = this.siteDemo.publishing_interface;
				this.info.thumbnail_field = this.siteDemo.thumbnail_field;
				this.info.create_time_field = this.siteDemo.create_time_field;
				this.info.tags_field = this.siteDemo.tags_field;
				this.info.keywords_field = this.siteDemo.keywords_field;
				this.info.description_field = this.siteDemo.description_field;
				this.info.description_length =200;
				this.info.article_content_field = this.siteDemo.article_content_field;
				this.info.other_fields = this.siteDemo.other_fields;
				this.info.publish_success_flag = this.siteDemo.publish_success_flag;
				//loading
				const loading = this.$loading({
					lock: true,
					text: 'Loading...',
					spinner: 'el-icon-loading',
					background: 'rgba(255, 255, 255, 0.7)'
				});
				this.axios.post('/api/site/add', this.info).then(res => {
					if(res.code === 1) {
					  this.$router.push({path:'/writing/siteManagement/addedSuccessfully?id=' + res.result.id})
					}
					//关闭loading
					loading.close();
				})				
			}





		},
		  //下载安装包
		  download_plus(){
			  this.axios.post('/api/site/downloadPlus', {
				'site_demo_id' : this.info.site_demo_id,
				'key' : this.password,
			  }).then(res => {
				if(res.code === 1) {
				   window.open(res.result, '_blank');
				   this.$msgbox('接口获取成功，密码已自动替换，请解压上传到网站根目录','获取成功。')
				}else{
				  this.$msgbox(res.msg, '测试发布失败')
				}
			  })			  
			  
		  },

		  //生成秘钥
            generate(){
                const uppercaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                const lowercaseLetters = 'abcdefghijklmnopqrstuvwxyz';
                const numbers = '0123456789';
                const specialCharacters = '';

                let password = '';
                password += this.getRandomCharacter(uppercaseLetters);
                password += this.getRandomCharacter(lowercaseLetters);
                password += this.getRandomCharacter(numbers);
                password += this.getRandomCharacter(specialCharacters);

                for (let i = 0; i < 45; i++) {
                    password += this.getRandomCharacter(
                    uppercaseLetters + lowercaseLetters + numbers + specialCharacters
                    );
                }
				this.password=password;
            },
            getRandomCharacter(characters) {
                const randomIndex = Math.floor(Math.random() * characters.length);
                return characters.charAt(randomIndex);
            },
            copyInputValue() {
                const input = this.$refs.inputRef.$el.querySelector('input')
                input.select()
                document.execCommand('copy')
                this.$message.success('已复制到剪贴板')
            },			

      },
      created() {
	  
			this.generate()
			
            let site_id = this.$route.query.site_id;
			let https = this.$route.query.https;
			let domain = this.$route.query.domain;
			let title = this.$route.query.title;
			let keywords = this.$route.query.keywords;
			if(keywords){
				 keywords = keywords.split(/[，,|]/);
			}	
			//完整的url
			this.fullUrl=(https==1?"https://":"http://")+domain
			//以下info字段是加到站点数据库里的
			this.info.site_demo_id=site_id
			this.info.name=title
			this.info.is_https=https
			this.info.website=domain
			this.info.keywords = keywords;
			//获取站点demo数据
			this.getDemo()
      },
  }
</script>

<style>
  @import "autoSetting.css";
</style>
